<template>
  <div class="container">
    <get-local-info
      v-if="isGetLocalInfo"></get-local-info>
    <div class="flex v-align-c user-bar font-12">
      <div class="flex v-align-c local-city pad-l-15 pad-r-10 pad-t-10 pad-b-10" @click="changeCity">
        <span class="font-15 mar-l-5 mar-r-2">{{cityName}}</span>
        <icon class="iconfont icon-arrow-right local-arrow mar-t-2"></icon>
      </div>
      <!-- <div class="search-bar flex-item">
        <div class="flex v-align-c">
          <div class="search flex-item mar-r-15" @click="$pt.navigateTo({url:'/pages/nearby-site/search/main?pageFrom=' + JSON.stringify(local) })">
            <van-icon name="search" color="#aeaeae" size="16px" class="mar-l-8 mar-r-4 flex"/>
            <div class="font-14">搜索门店名称/取货地点名称/小区</div>
          </div>
        </div>
      </div> -->
      <div class="search-box flex-item">
        <van-search
          :value='listQuery.keyword'
          placeholder="搜索门店/取货地点/小区"
          use-action-slot
          shape="round"
          @change="onChangeVal"
          @search="onSearch"
          :autofocus="true"
          ref="searchBox">
          <div class="search-btn mar-t--2" size="small" slot="action" @tap="onSearch2">搜索</div>
        </van-search>
      </div>
    </div>
    <div class="height-43"></div>
    <div class="flex v-align-c flex-between mar-t--3 mar-b-8 pad-l-15 relocal-bar">
      <div class="local-add font-15">
        <div class="flex v-align-c">
          <img v-if="fileSpace" :src="fileSpace + '/images/local-icon-8.png'" class="width-14 height-17 mar-r-5" alt="">
          <div class="line-1 width-255">{{selAddress}}</div>
        </div>
      </div>
      <div class="flex v-align-c font-13 pad-t-12 pad-b-12 pad-l-15 pad-r-15" @click="relocal">
        <label>{{ localTxt }}</label>
      </div>
    </div>
    <template v-if="searchData">
      <div v-if="objPickup.takeAddress && sureChangeSite" class="top-user-list">
        <h2 class="font-15 font-color-6 mar-b-11">当前提货点</h2>
        <div class="other-about">
          <div class="about mar-b-12 pos-rel" :class="objPickup.show ? 'actived' : ''">
            <div class="flex">
              <div
                @click="previewImage(objPickup.takeAddressPicUrl, objPickup.takeAddressPicUrlArr)"
                v-if="objPickup.takeAddressPicUrl"
                class="pos-rel avatar-circle mar-r-10">
                <img class="avatar" :src="objPickup.takeAddressPicUrl + '?imageView2/2/w/500'"/>
              </div>
              <div class="flex-item" @click="goCurrent">
                <div class="flex">
                  <div class="flex-item">
                    <div v-if="objPickup.takeName" class="font-15 name mar-t--3 tag-line">
                      <span v-if="getIsHomeDelivery || getIsStoreExtraction" class="tag-goods mar-t-3">
                        <span>门店</span>
                      </span>{{ objPickup.takeName }}</div>
                    <div v-if="objPickup.distance" class="font-13 distance">距您{{ objPickup.distance }}m</div>
                    <div v-if="objPickup.takeAddress" class="font-13 address font-color-6 mar-t-4">{{ objPickup.takeAddress }}</div>
                  </div>
                  <div class="select-icon pos-rel" :class="objPickup.show ? 'actived' : ''">
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
            </div>
        </div>
      </div>
      <div class="top-user-list">
        <h2 class="font-15 font-color-6 mar-b-11">当前定位附近门店和提货点</h2>
        <div class="other-about">        
          <template v-if="listData.length !== 0">
            <div class="about mar-b-12 pos-rel"
              :class="item.show ? 'actived' : ''"
              v-for="(item, index) in listData" :key="index">
              <div class="flex">
                <div
                  @click="previewImage(item.takeAddressPicUrl, item.takeAddressPicUrlArr)"
                  v-if="item.takeAddressPicUrl"
                  class="pos-rel avatar-circle mar-r-10">
                  <img class="avatar" :src="item.takeAddressPicUrl + '?imageView2/2/w/500'"/>
                  <div v-if="!index" class="distance-s">距离最近</div>
                </div>
                <div class="flex-item" @click="selectStore(item)">
                  <div class="flex">
                    <div class="flex-item">
                      <div class="font-15 name mar-t--3 tag-line">
                        <span v-if="item.isHomeDelivery || item.isStoreExtraction" class="tag-goods mar-t-3">
                          <span>门店</span>
                        </span>{{ item.takeName }}</div>
                      <div>
                        <span v-if="item.isHomeDelivery" class="tag-type tag-1">配送到家</span>
                        <span v-if="item.isStoreExtraction" class="tag-type tag-2">到店自提</span>
                        <span v-if="item.isCommunityGroupExtraction" class="tag-type tag-3">社区团购</span>
                      </div>
                      <div class="font-13 distance">距您{{ item.distance }}m <template v-if="!item.customerInRange">（超出配送范围）</template></div>
                      <div class="font-13 address font-color-6 mar-t-4">{{ item.takeAddress }}</div>
                    </div>
                    <div class="select-icon pos-rel" :class="item.show ? 'actived' : ''">
                      <span></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div
        class="sure-btn"
        @click="sureElsBtn"
        :class="!sureBtn ? 'disable' : ''"
        :style="{color:appInfo.style.color5, background:appInfo.style.color2}">确认提货点</div>
      <div class="height-50"></div>
    </template>
    <div class="category-nodata text-align-c" v-if="searchNull">
      <img v-if="fileSpace" :src="fileSpace + '/images/unlocal-pic.png'" class="width-213 height-158" alt="">
      <div class="align-c mar-t-5 font-16 font-color-8">
        当前定位{{ defaultDeliveryRange }}公里范围内，没有门店<br />或提货点可以切换其他地址看看~
      </div>
      <button
        size="default"
        class="primary-button font-18"
        :style="{color:appInfo.style.color5, background:appInfo.style.color2, borderColor:appInfo.style.color2}"
        @click="changeCity">切换地址</button>
      <button
        size="default"
        class="primary-button other font-18"
        :style="{color:appInfo.style.color2, borderColor:appInfo.style.color2}"
        @click="goDefault">逛逛总店</button>
    </div>
  </div>
</template>

<script>
  import { pagingNearbyTakeAddress, getDefaultCommand, getByEnterpriseId } from '@/api/personal'
  import { getLocation, updateMemberLocation } from '@/api/common'
  import { setMemberId, setCurrentPickup } from '@/utils/auth'
  import GetLocalInfo from '@/components/GetLocalInfo'
  export default {
    components: {
      GetLocalInfo
    },
    data() {
      return {
        typePage: null,
        localTxt: '重新定位',
        listQuery: {
          memberId: '',
          keyword: '',
          lng: '',
          lat: '',
          currentPage: 1,
          size: 10
        },
        currentPage: 1,
        pullLoad: {
          loading: false,
          finished: false
        },
        listData: [],
        local: {},
        localAgain: {},
        cityName: '',
        selAddress: '',
        searchData: true,
        searchNull: false,
        defaultCommandVillage: {},
        currentPickup: {},
        objPickup: {
          show: true,
          memberId: '',
          takeName: '',
          distance: '',
          takeAddress: '',
          takeAddressPicUrl: ''
        },
        appInfo: {},
        selItem: {},
        defaultDeliveryRange: '',
        sureChangeSite: false,
        sureBtn: false,
        relocalBoolean: false,
        isGetLocalInfo: false
      }
    },
    onLoad() {
    },
    onShow() {
      this.isGetLocalInfo = false
      this.relocalBoolean = false
      this.$pt.removeStorageSync('chooseLocation')
      this.local = this.$pt.getStorageSync('local')
      this.appInfo = this.$pt.getStorageSync('appInfo')
      if (!Object.keys(this.local).length) {
        this.isGetLocalInfo = false
        setTimeout(() => {
          this.isGetLocalInfo = true
        }, 100)
      }
      if (this.$store.state.previewImageFlag) return
      this.objPickup = {
        show: true,
        memberId: '',
        takeName: '',
        distance: '',
        takeAddress: '',
        takeAddressPicUrl: ''
      }
      this.localAgain = {}
      this.getDefaultCommand(this.getMemberId, this.local, '1')
      // 确认订单页进入切换自提点页面
      if (!this.getCurrentPage().query.urlSource) {
        this.$pt.removeStorageSync('siteMemberId')
      }
      if (this.$pt.getStorageSync('sureChangeSite')) {
        this.sureChangeSite = true
        this.sureBtn = true
      } else {
        this.$pt.setStorageSync('sureChangeSite', false)
        this.sureChangeSite = false
        this.sureBtn = false
      }
      if (this.listData.length) {
        this.listData.forEach(item => {
          item.show = false
        })
      }
      if (this.getCurrentPage().query.typePage) {
        this.typePage = this.getCurrentPage().query.typePage
      }
      this.initEls()
      this.currentPage = 1
      this.pullLoad.finished = false
      this.listData = []
      this.pagingNearbyTakeAddress()
      this.getByEnterpriseId()
    },
    mounted() {
    },
    // onPullDownRefresh() {
    //   this.$utils.showToast({
    //     title: '数据加载中',
    //     icon: 'loading'
    //   })
    //   this.relocalBoolean = false
    //   this.local = this.$pt.getStorageSync('local')
    //   this.initEls()
    //   this.currentPage = 1
    //   this.pullLoad.finished = false
    //   this.listData = []
    //   this.searchData = true
    //   this.searchNull = false
    //   this.pagingNearbyTakeAddress()
    //   this.getByEnterpriseId()
    //   setTimeout(() => {
    //     this.$pt.stopPullDownRefresh()
    //   }, 500)
    // },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.pagingNearbyTakeAddress()
      }
    },
    methods: {
      updateLocalEls() {
        this.local = this.$pt.getStorageSync('local')
        this.initEls()
        this.currentPage = 1
        this.pullLoad.finished = false
        this.listData = []
        this.searchData = true
        this.searchNull = false
        this.pagingNearbyTakeAddress()
      },
      initPageInfo() {
        this.local = this.$pt.getStorageSync('local')
        this.initEls()
        this.currentPage = 1
        this.pullLoad.finished = false
        this.listData = []
        this.searchData = true
        this.searchNull = false
        this.pagingNearbyTakeAddress()
      },
      resetData() {
        // 重置数据
        this.searchNull = false
        this.currentPage = 1
        this.listQuery.currentPage = 1
        this.listData = []
        this.pullLoad.finished = false
      },
      onSearch(e) {
        // 键盘直接搜索点击事件
        this.listQuery.keyword = e.mp.detail
        this.resetData()
        this.pagingNearbyTakeAddress()
      },
      onChangeVal(e) {
        this.listQuery.keyword = e.mp.detail
      },
      onSearch2() {
        // 搜索按钮点击事件
        this.resetData()
        this.pagingNearbyTakeAddress()
      },
      getByEnterpriseId() {
        getByEnterpriseId({enterpriseId: this.getEnterpriseId}).then(response => {
          if (response.data.defaultDeliveryRange) {
            this.defaultDeliveryRange = response.data.defaultDeliveryRange
          } else {
            this.defaultDeliveryRange = '5'
          }
        })
      },
      previewImage(current, images) {
        this.$pt.setStorageSync('chooseLocation', true)
        this.$pt.previewImage({
          urls: images,
          current: current,
          success: res => {
            this.$store.commit('setPreviewImageFlag', true)
          }
        })
      },
      getDefaultCommand(getMemberId, local, type) {
        if (!getMemberId) return
        if (!this.sureChangeSite) return
        if (!local.latitude || !local.longitude) return
        getDefaultCommand({
          memberId: getMemberId,
          lat: local.latitude,
          lng: local.longitude
        }).then(response => {
          if (response.isError) return
          this.objPickup = {}
          if (response.data.villageCommander) {
            let resData = response.data.villageCommander
            this.objPickup.show = true
            if (resData.memberId) {
              this.objPickup.memberId = resData.memberId
            }
            if (resData.takeName) {
              this.objPickup.takeName = resData.takeName
            }
            if (resData.distance) {
              this.objPickup.distance = Number(resData.distance) > 1000 ? `${(Number(resData.distance) / 1000).toFixed(1)}k` : Number(resData.distance)
            }
            if (resData.takeAddress) {
              this.objPickup.takeAddress = resData.takeAddress
            }
            if (resData.takeAddressPicUrl) {
              this.objPickup.takeAddressPicUrl = resData.takeAddressPicUrl
              this.objPickup.takeAddressPicUrlArr = []
              this.objPickup.takeAddressPicUrlArr.push(this.objPickup.takeAddressPicUrl)
            }
          } else {
            this.objPickup.show = false
            this.objPickup = {}
          }
          // 逛逛总店
          if (type === '2') {
            this.selItem = this.objPickup
            this.sureElsBtn()
          }
        })
      },
      initEls() {
        if (!this.local.address) {
          this.locationEls(this.local.latitude, this.local.longitude)
        } else {
          this.selAddress = this.$utils.addressCut(this.local.address)
          this.cityName = this.$utils.cityCut(this.local.address, this.local.address)
        }
      },
      // 切换城市
      changeCity() {
        const that = this
        that.$pt.setStorageSync('chooseLocation', true)
        that.$pt.chooseLocation({
          success: (res) => {
            // console.log('切换城市', res)
            that.$store.commit('setPreviewImageFlag', true)
            that.currentPage = 1
            that.pullLoad.finished = false
            that.listData = []
            that.searchData = true
            that.searchNull = false
            that.pagingNearbyTakeAddress(res.latitude, res.longitude)
            if (res.address) {
              that.localAgain.latitude = res.latitude
              that.localAgain.longitude = res.longitude
              that.localAgain.address = res.address
              that.selAddress = that.$utils.addressCut(res.address)
              that.cityName = that.$utils.cityCut(res.address, res.name)
            }
          }
        })
      },
      // 重新定位
      relocal() {
        let that = this
        if (that.relocalBoolean) return
        that.relocalBoolean = true
        that.listQuery.keyword = ''
        that.selAddress = '定位中...'
        that.localTxt = '正在定位'
        setTimeout(() => {
          that.$pt.getLocation({
            type: 'gcj02',
            success(res) {
              that.$store.commit('setPreviewImageFlag', true)
              if (res.latitude && res.longitude) {
                that.localTxt = '重新定位'
                that.locationEls(res.latitude, res.longitude)
                that.currentPage = 1
                that.pullLoad.finished = false
                that.listData = []
                that.searchData = true
                that.searchNull = false
                that.pagingNearbyTakeAddress(res.latitude, res.longitude)
              }
            },
            fail(res) {
              that.localTxt = '重新定位'
              that.selAddress = that.$utils.addressCut(that.local.address)
              that.relocalBoolean = false
            }
          })
        }, 500)
      },
      // 根据经纬度获取详细地址
      locationEls(lat, lng) {
        getLocation({
          latitude: lat,
          longitude: lng
        }).then((response) => {
          if (response.isError) return
          this.relocalBoolean = false
          const localRes = response.data
          this.selAddress = this.$utils.addressCut(localRes.address)
          this.cityName = this.$utils.cityCut(localRes.address, localRes.city)
          this.localAgain = {
            latitude: lat,
            longitude: lng,
            address: this.selAddress
          }
        }).catch(() => {
        })
      },
      pagingNearbyTakeAddress(lat, lng) {
        if (this.searchNull) {
          this.$pt.setStorageSync('nullSelectSite', true)
          return
        }
        if (lat && lng) {
          this.listQuery.lat = lat
          this.listQuery.lng = lng
        } else {
          this.listQuery.lat = this.local.latitude
          this.listQuery.lng = this.local.longitude
        }
        if (!this.listQuery.lat || !this.listQuery.lng) return
        this.listQuery.memberId = this.getCustomerId || ''
        this.listQuery.currentPage = this.currentPage
        // 确认订单页进入切换自提点页面
        if (this.getCurrentPage().query.urlSource) {
          this.listQuery.isCommunityGroupExtraction = this.getCurrentPage().query.urlSource
        }
        pagingNearbyTakeAddress(this.listQuery).then(response => {
          if (response.isError) return
          this.$pt.hideToast()
          this.currentPage++
          response.data.records.forEach(item => {
            item.show = false
            // 距离
            if (item.distance) {
              item.distance = Number(item.distance) > 1000 ? `${(Number(item.distance) / 1000).toFixed(1)}k` : Number(item.distance)
            }
            if (item.takeAddressPicUrl) {
              item.takeAddressPicUrlArr = []
              item.takeAddressPicUrlArr.push(item.takeAddressPicUrl)
            }
            this.listData.push(item)
          })
          if (this.listData.length === 0 || this.listData.length >= response.data.total) {
            this.pullLoad.finished = true
          }
          if (!this.sureBtn) {
            this.$pt.setStorageSync('nullSelectSite', true)
          }
          if (this.listData.length === 0) {
            this.searchData = false
            this.searchNull = true
            this.$pt.setStorageSync('nullSelectSite', true)
          } else {
            this.searchData = true
            this.searchNull = false
          }
          if (this.$pt.getStorageSync('nullSelectSite')) {
            this.$pt.setStorageSync('sureChangeSite', false)
            this.sureChangeSite = false
            this.sureBtn = false
          }
        }).catch(() => {
        })
      },
      updateMemberLocation(memberId, local) {
        if (!local.latitude || !local.longitude) return
        updateMemberLocation({
          memberId: memberId,
          latitude: local.latitude,
          longitude: local.longitude
        }).then((response) => {
          // 确认订单页进入切换自提点页面
          if (this.getCurrentPage().query.urlSource) {
            this.$pt.setStorageSync('siteMemberId', this.selItem.memberId)
            this.$pt.navigateBack({ delta: -1 })
          } else {
            this.linkHome()
          }
        }).catch(() => {
        })
      },
      sureElsBtn() {
        if (!this.sureBtn) return
        if (!Object.keys(this.localAgain).length) {
          this.localAgain = this.local
        }
        if (!this.getCurrentPage().query.urlSource) {
          setMemberId(this.selItem.memberId)
          this.$utils.setMyId(this.selItem.memberId)
          this.$root.$mp.appOptions.query = {}
          if (this.selItem.memberId) {
            this.currentPickup.memberId = this.selItem.memberId
          }
          if (this.selItem.phone) {
            this.currentPickup.phone = this.selItem.phone
          }
          if (this.selItem.storePhone) {
            this.currentPickup.phone = this.selItem.storePhone
          }
          if (this.selItem.lat) {
            this.currentPickup.latitude = this.selItem.lat
          }
          if (this.selItem.lng) {
            this.currentPickup.longitude = this.selItem.lng
          }
          if (this.selItem.takeName) {
            this.currentPickup.takeName = this.selItem.takeName
          }
          if (this.selItem.takeAddressPicUrl) {
            this.currentPickup.takeAddressPicUrl = this.selItem.takeAddressPicUrl
          }
          if (this.selItem.takeAddress) {
            this.currentPickup.takeAddress = this.$utils.addressCut(this.selItem.takeAddress)
          }
          setCurrentPickup(this.currentPickup)
        }
        this.$pt.removeStorageSync('nullSelectSite')
        this.$pt.setStorageSync('sureChangeSite', true)
        this.sureChangeSite = true
        if (this.getCustomerId) {
          this.updateMemberLocation(this.getCustomerId, this.localAgain)
        } else {
          this.linkHome()
        }
      },
      linkHome() {
        this.$pt.reLaunch({
          url: '/pages/home/main'
        })
      },
      goCurrent() {
        this.selItem = this.objPickup
        this.objPickup.show = true
        this.listData.forEach(value => {
          value.show = false
        })
      },
      selectStore(item) {
        this.sureBtn = true
        this.listData.forEach(value => {
          value.show = false
        })
        item.show = true
        const changeData = item.show
        this.$delete(item, 'show')
        this.$set(item, 'show', changeData)
        this.selItem = this.$utils.deepClone(item)
        this.objPickup.show = false
        const changeCurrent = this.objPickup.show
        this.$delete(this.objPickup, 'show')
        this.$set(this.objPickup, 'show', changeCurrent)
      },
      goDefault() {
        if (!Object.keys(this.localAgain).length) {
          this.localAgain = this.local
        }
        this.$pt.removeStorageSync('nullSelectSite')
        this.$pt.setStorageSync('sureChangeSite', true)
        this.sureChangeSite = true
        this.sureBtn = true
        this.getDefaultCommand(this.appInfo.defaultMemberId, this.localAgain, '2')
      }
    }
  }
</script>

<style lang="less" scoped>
  .tag-type{
    background: #f1f3fc;
    border: #0351FF 1px solid;
    color: #2577FF;
    border-radius: 2px;
    padding: 1.5px 4px;
    font-size: 10px;
    &.tag-1{
      margin-right: 6px;
    }
    &.tag-2{
      margin-right: 6px;
    }
  }
  .container{
    background: #fff;
    min-height: calc(100vh);
  }
  .tag-line{
    span{
      display: inline-block;
      vertical-align: top;
    }
  }
  .tag-goods{
    line-height: unset!important;
    font-weight: normal;
    color: #fff;
    font-size: 12px;
    text-align: center;
    margin-right: 5px;
    box-sizing: border-box;
    display: inline-block;
    padding: 0 6px;
    height: 18px;
    background: #363636;
    border-radius: 3px;
  }
  .search-box {
    background: white;
    /deep/ .van-search{
      padding-left: 0;
      padding-right: 0;
    }
    // 对搜索框进行改造
    /deep/ .van-search--show-action {
      background: unset !important;
      padding-right: unset;
    }
    /deep/ .van-cell {
      background: #f4f4f4;
      border-radius: 25px;
    }
    /deep/ .van-search__action {
      background: white;
      font-size: 20px;
      color: #333333;
      font-weight: bold;
    }
  }
  .distance-s{
    background: #ff243d;
    color: #fff;
    font-size: 12px;
    padding: 1px 11px;
    border-radius: 10px 0px 10px 0px;
    position: absolute;
    left: -9px;
    top: -9px;
  }
  .primary-button{
    border-color: #ff243d;
    border-style:solid;
    border-width: 1px;
    background: #ff243d;
    color: #fff;
    border-radius: 50px;
    margin: 26px auto 0 auto;
    padding: 1px 0;
    width: 190px;
    &.other{
      background: #fff;
      margin: 16px auto 0 auto;
    }
  }
  .sure-btn{
    text-align: center;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
    &.disable{
      color: #666666!important;
      background: #e3e3e3!important;
    }
  }
  .default-command-info{
    margin-top: 83px;
    margin-bottom: 27px;
    i{
      display: block;
      height: 1px;
      background: #c2c2c2;
      width: 80px;
      margin-bottom: -2px;
    }  
    span{
      display: block;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin: 0 23px;
    }
  }
  .search-bar{
    width: calc(100% - 16px);
    .search{
      display: flex;
      justify-content: left;
      align-items: center;
      border-radius: 25px;
      height: 30px;
      color: #aeaeae;
      background-color: #f4f4f4;
    }
  }
  .category-nodata{
    img{
      display: inline-block;
      margin-top: 10px;
    }
  }
  .relocal-bar{
    background: #f5f5f5;
    .local-add{
      color: #292929;
      height: 19px;
      line-height: 19px;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      word-break:break-word;
    }
    label{
      color: #ff1717;
    }
  }
  .submit-btn{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    border-top: #f1f1f1 1px solid;
    z-index: 20;
  }
  .p-button{
    display: block;
    border-radius: 100px;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    border: none;
    background: linear-gradient(to right, #ff9700, #ff4800);
    &[disabled]{
      color: #595959;
      background: linear-gradient(to right, #dadada, #dadada);
    }
    &:after{
      content: '';
      display: none;
    }
  }
  .user-bar{
    background: #fff;
    height: 43px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 50;
    .local-city{
      color: #333333;
      .local-arrow{
        transform:rotate(90deg);
      }
    }    
    .dark-gray{
      color: #595959;
    }
  }
  // 切换主页弹窗
  .top-user-list{
    padding: 4px 15px 2px 15px;
    .border-r-line{
      height: 1px;
      background: #e7e7e7;
      margin-left: 12px;
    }    
    .about{
      border: #e7e7e7 1px solid;
      border-radius: 10px;
      padding: 8px 8px 10px 8px!important;
      background: #faf9f9;
      position: relative;
      z-index: 1;
      &.actived{
        border: #ff1717 1px solid;
        background: #fff9fa;
      }
      .select-icon{
        margin-left: 27px;
        span{
          position: absolute;
          right: 1px;
          top: 50%;
          margin-top: -10px;
          width: 20px;
          height: 20px;
          background-image: url('https://veekrayimg.joinsun.vip/images/select-point-11.png');
          background-size: 100% 100%;
        }        
        &.actived{
          span{
            background-image: url('https://veekrayimg.joinsun.vip/images/select-point-12.png');
            background-size: 100% 100%;
          }          
        }
      }
      .avatar {
        width: 66px;
        height: 66px;
        border-radius: 5px; 
      }      
      .last-login-t{
        font-size: 12px;
        color: #aeaeae;
        padding-top: 6px;
      }
      .icon-v{
        position: absolute;
        right: -6px;
        bottom: 0;
        width: 23px;
        height: 23px;
      }
      .distance{
        color: #ff243d;
      }
      .address{
        font-size: 12px;
        span{
          color: #595959;
        }
        label{
          color: #292929;
          line-height: 18px;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-line-clamp:2;
          -webkit-box-orient:vertical;
          word-break:break-word;
        }
      }
      .tel{
        font-size: 12px;
        position: absolute;
        left: 98px;
        line-height: 1;
        bottom: 13px;
        padding: 0px 10px 10px 0;
        span{
          color: #595959;
        }
        label{
          color: #ff590a;
        }
      }
      .info {
        padding-top: 10px;
        margin-right: 20px;
        color: #666;
        border-top: #f7f7f7 1px solid;
      }
    }
  }
</style>
